<script setup lang="ts">
import {ref} from 'vue';
import NavBar from '@/components/NavBar.vue';
import SongListItem from '@/pages/components/SongListItem.vue';
import SongPlayer from '@/pages/components/SongPlayer.vue';
import KgSearchDialog from '@/components/KgSearchDialog.vue';
import { getSongInfo,searchSong } from '@/apis/kgApi';
import { biliEmitter } from '@/utils/mitt';
import { useBiliStore } from '@/stores/bili';

const biliStore=useBiliStore();
const showSearch=ref(false);
const queueList=ref<Array<QueueItem>>([]);
const queueItem=ref<QueueItem|undefined>();
const replaceItem=ref<QueueItem|undefined>();

const handleSongEnd=() =>{
  queueList.value.shift();
  queueItem.value=undefined;
  if(queueList.value.length==0) return;
  handleSongPlay(queueList.value[0],0);
}
const handleSongPlay=async (item:QueueItem,_idx:number) =>{;
  const info=await getSongInfo(item.song.id);
  item.song.src=info.play_url;
  item.song.img=info.img;
  item.song.lyrics=info.lyrics;
  queueItem.value=item;
}
const handleSongUp=(_item:QueueItem,idx:number) =>{
  if(idx==0) return;
  const q1=queueList.value[idx-1];
  const q2=queueList.value[idx];
  queueList.value[idx-1]=q2;
  queueList.value[idx]=q1;
}
const handleSongDown=(_item:QueueItem,idx:number) =>{
  if(idx==queueList.value.length-1) return;
  const q1=queueList.value[idx];
  const q2=queueList.value[idx+1];
  queueList.value[idx]=q2;
  queueList.value[idx+1]=q1;
}
const handleSongRemove=(_item:QueueItem,idx:number) =>{
  queueList.value.splice(idx,1);
}
const selectSong=(song:any) =>{
  if(!song?.id) return;
  queueList.value.push({
    _id:`id_${biliStore.uid}_${song.id}`,
    song
  })
  if(queueItem.value) return;
  handleSongPlay(queueList.value[0],0);
}
const handleReplace=(_item:QueueItem,_idx:number) =>{
  replaceItem.value=_item;
  showSearch.value=true;
}
const selectReplaceSong=(song:any) =>{
  replaceItem.value!.song=song;
}
const listenBiliWebsocket=() =>{
  biliEmitter.on('bili:danmu',(data:BiliDanmuMsg) =>{
    console.log('damu:',data);
    const reg=new RegExp('^点歌[:|：|\\s*]\\s*(.*)');
    const arr=data.msg.match(reg);
    if(!arr) return;
    const user:UserInfo={
      id:`${data.uid}`,
      name:data.uname,
      avatar:data.uface,
    }
    const u=queueList.value.find(v => v.user?.id==user.id);
    if(u?._id&&queueItem.value?._id==u?._id) return;
    searchSong(`${arr[1]}`).then((_data:any) =>{
      const s=_data.lists?.[0];
      if(!s) return;
      const song:SongInfo={
        id:s.EMixSongID,
        name:s.SongName,
        author:s.SingerName,
      }
      if(u?.song){
        u._id=`id_${user.id}_${song.id}`;
        u.song=song;
      }else{
        queueList.value.push({
          _id:`id_${user.id}_${song.id}`,
          song,user
        })
      }
      if(queueItem.value) return;
      handleSongPlay(queueList.value[0],0);
    })
  })
}
listenBiliWebsocket();
</script>

<template>
  <v-card class="h-full">
    <v-layout class="h-full">
      <NavBar @select="selectSong" />
      <v-main>
        <v-container class="flex flex-col h-full" fluid>
          <SongPlayer :info="queueItem?.song" :user="queueItem?.user" @end="handleSongEnd" />
          <div class="flex-auto overflow-x-hidden overflow-y-auto scrollbar-thin bs-1">
            <TransitionGroup v-if="queueList.length" name="list" tag="ul">
              <SongListItem
                v-for="(item,idx) in queueList" :key="item._id"
                :info="item.song" :user="item.user" :idx="idx"
                :is-active="item._id==queueItem?._id" :length="queueList.length"
                @play="handleSongPlay(item,idx)" @up="handleSongUp(item,idx)" @down="handleSongDown(item,idx)"
                @remove="handleSongRemove(item,idx)" @replace="handleReplace(item,idx)"
              />
            </TransitionGroup>
            <div v-else class="wh-full flex-col flex-cc">
              <v-icon icon="mdi-delete-empty-outline" color="grey" size="64"></v-icon>
              <div class="text-gray text-sm">暂无数据</div>
            </div>
          </div>
        </v-container>
      </v-main>
    </v-layout>
  </v-card>
  <KgSearchDialog v-model="showSearch" @select="selectReplaceSong" />
</template>

<style scoped>
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.list-leave-active {
  position: absolute;
}
</style>
